<template>
  <div v-if="algoItem.operateMethodTypes.length" id="function-way">
    <div class="w main">
      <div class="title">使用方式</div>
      <div class="docs-list">
        <div v-if="algoItem.operateMethodTypes.includes(1)" class="docs-item">
          <div class="docs-name">API服务</div>
          <div class="docs-des">提供APl调用地址及接口文档</div>
          <div class="check cursor" @click="goDocs('algorithmApiDocumentVOS')">
            <span> 查看使用文档 </span>
            <i class="ri-arrow-right-up-line icon"></i>
          </div>
          <img src="@/assets/img/algo-service/api.png" draggable="false" />
        </div>
        <div v-if="algoItem.operateMethodTypes.includes(2)" class="docs-item">
          <div class="docs-name">SDK服务</div>
          <div class="docs-des">提供SDK服务包，支持联网激活、离线激活两种形式</div>
          <div class="check cursor" @click="goDocs('algorithmSdkDocumentVOS')">
            <span> 查看使用文档 </span>
            <i class="ri-arrow-right-up-line icon"></i>
          </div>
          <img src="@/assets/img/algo-service/sdk.png" draggable="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { inject, Ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { ActiveTab } from '../../docs.vue'
  import { AlgoItem } from '../index.vue'

  const router = useRouter()

  const algoItem: Ref<AlgoItem> = inject('algoItem')!

  const goDocs = (type: ActiveTab) => {
    router.push({
      path: '/algorithm-center/docs/' + algoItem.value.id,
      query: {
        type
      }
    })
  }
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  #function-way {
    .main {
      padding: 60px 0;
      background: url('@/assets/img/algo-service/algo-title-icon.svg') no-repeat;
      background-position: 716px 50px;
      background-size: 68px 64px;

      .title {
        position: relative;
        font-size: 30px;
        text-align: center;
        background: linear-gradient(180deg, rgba(14, 14, 40, 0.95) 0%, rgba(54, 54, 99, 0.95) 100%);
        background-clip: text;
        line-height: 38px;
        -webkit-text-fill-color: transparent;
        .fw500();

        img {
          position: absolute;
          top: -7px;
          left: 50%;
          z-index: 3;
          width: 68px;
          height: 64px;
        }
      }

      .docs-list {
        display: flex;
        justify-content: center;
        margin-top: 56px;

        .docs-item {
          position: relative;
          padding: 28px 40px 32px;
          flex: 1;
          height: 210px;
          background: #fff;
          border: 1px solid #e0e5ee;
          border-radius: 8px;

          .docs-name {
            font-weight: 700;
            font-size: 20px;
            line-height: 28px;
            color: #000;
          }

          .docs-des {
            margin-top: 16px;
            width: calc(100% - 200px);
            height: 48px;
            font-size: 14px;
            color: rgba(25, 25, 48, 0.75);
            font-weight: 400;
            line-height: 24px;
          }

          .check {
            display: flex;
            align-items: center;
            margin-top: 36px;

            span {
              font-size: 16px;
              line-height: 24px;
              background: linear-gradient(180deg, #4489f1 0%, #1d5cdf 47.4%, #134ec8 100%);
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }

            .icon {
              margin-left: 8px;
              background: linear-gradient(180deg, #4489f1 0%, #1d5cdf 47.4%, #134ec8 100%);
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }
          }

          img {
            position: absolute;
            top: 50%;
            right: 36px;
            transform: translateY(-50%);
            width: 160px;
            height: 148px;
          }

          &::before {
            position: absolute;
            top: -8px;
            right: 12px;
            width: 80px;
            height: 8px;
            background: linear-gradient(275.56deg, #3b53ea 0%, #5694f7 100.99%), #4154d1;
            border-radius: 4px 4px 0 0;
            content: '';
          }

          & + .docs-item {
            margin-left: 24px;
          }
        }
      }
    }
  }
</style>
